import React, { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { add, minus, asyncMinus, asyncGetList } from "../../redux/modules/counterStore"

export default function Index() {
  let { count, list } = useSelector(state => state.counter)
  let dispatch = useDispatch();
  const addFn = function () {
    // let dispatch = useDispatch();
    dispatch(add(2));
  }
  const minusFn = function () {
    // dispatch(minus(1));
    // 把数字的减变成异步执行
    dispatch(asyncMinus(1));
  }
  useEffect(() => {
    dispatch(asyncGetList());
  }, [])

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={addFn}>点击我加</button>
      <button onClick={minusFn}>点击我减</button>
      <ul>
        {list.map(item => <li key={item.id}>{item.val}</li>)}
      </ul>
    </div>
  )
}
